<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>对账管理</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../../../elementUI/index.css">
  <link rel="stylesheet" href="../../../css/index.css">
</head>

<body>
  <div id="app" class="minWidth">
    <el-form :inline="true" :form="form">
      <el-select placeholder="请选择企业" clearable filterable v-model.trim="form.Store_SerialNumber"
        @change="handleclassify">
        <el-option v-for="(item,index) in store" :key="index" :label="item.Store_Name"
          :value="item.Store_SerialNumber"></el-option>
      </el-select>
      <el-select placeholder="请选择商品" clearable filterable v-model.trim="form.Supplier_SerialNumber"
        @change="handleclassify">
        <el-option v-for="(item,index) in supplier" :key="index" :label="item.Supplier_Name"
          :value="item.Supplier_SerialNumber"></el-option>
      </el-select>
      <el-select placeholder="请选择类别" clearable filterable v-model.trim="form.Category_SerialNumber"
        @change="handleclassify">
        <el-option v-for="(item,index) in category" :key="index" :label="item.Category_Name"
          :value="item.Category_Name"></el-option>
      </el-select>
      <el-date-picker v-model="time" value-format="yyyy-MM-dd" @change="DateChange" type="daterange" align="center"
        unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
        :picker-options="pickerOptions">
      </el-date-picker>
      <el-radio v-model="radio" label="1" @change="handlechange">一年内</el-radio>
      <el-radio v-model="radio" label="2" @change="handlechange">本月</el-radio>
      <el-radio v-model="radio" label="3" @change="handlechange">今日</el-radio>
    </el-form>
    <div style="display: flex; justify-content: space-around; align-items: center;">
      <el-col :span="8" style="width: 40%;">
        <el-card shadow="hover" style="margin: 30px;">
          <h3>销售总额:</h3>
          <div class="receivable">
            <div>
              <div class="text">外企数量:</div>
              <p class="total">￥{{thousands(price.Sales_Amount)}}</p>
            </div>
            <div>
              <div class="text">外企销量:</div>
              <p class="total">￥{{thousands(price.Sales_Amount)}}</p>
            </div>
            <div>
              <div class="text">外企销量额:</div>
              <p class="total">￥{{thousands(price.Collection_Amount)}}</p>
            </div>
          </div>
        </el-card>
      </el-col>
      <div id="SalesVolume" style="width: 800px;height:300px; margin-top: 2%;"></div>
    </div>
    <el-table height="450" :data="tableData" stripe border style="width: 100%" @expand-change="handleChildren">
      <el-table-column type="expand" width="50">
        <template slot-scope="props">
          <el-table v-if="props.row.Children.article_info.length> 0? true:false"
            :data="props.row.Children.article_info">
            <el-table-column label="序号" align="center" width="50" type="index"></el-table-column>
            <el-table-column prop="Sales_Order_SerialNumber" align="center" label="销售单号"></el-table-column>
            <el-table-column prop="Collection_Date" align="center" label="收款时间"></el-table-column>
            <el-table-column prop="Article_Name" align="center" label="商品名称"></el-table-column>
            <el-table-column prop="Category_Name" align="center" label="商品类型"></el-table-column>
            <el-table-column prop="Quantity" align="center" label="销售数量">
              <template v-slot="{row}">
                {{ZeroRemoval(row.Quantity)}}
              </template>
            </el-table-column>
            <el-table-column prop="Amount" align="center" label="销售金额">
              <template v-slot="{row}">
                {{thousands(row.Amount)}}
              </template>
            </el-table-column>
            <el-table-column prop="Purchase_Amount" align="center" label="采购金额">
              <template v-slot="{row}">
                {{thousands(row.Purchase_Amount)}}
              </template>
            </el-table-column>
            <el-table-column prop="Paid_Amount" align="center" label="实付金额">
              <template v-slot="{row}">
                {{thousands(row.Paid_Amount)}}
              </template>
            </el-table-column>
            <el-table-column prop="Profit" align="center" label="毛利润">
              <template v-slot="{row}">
                {{thousands(row.Profit)}}
              </template>
            </el-table-column>
            <el-table-column prop="Supplier_Name" align="center" label="供应商名称"></el-table-column>
            <!-- <el-table-column width="220" label="操作">
                <template v-slot="{row}">
                  <el-button type="primary" size="small" @click="DistributeSupplier(row)">分配供应商</el-button>
                  <el-button type="primary" size="small" @click="GeneratePurchase(row)">生成采购单</el-button>
                </template>
              </el-table-column> -->
          </el-table>
        </template>
      </el-table-column>
      <el-table-column type="index" align="center" width="50" label="序号"></el-table-column>
      <el-table-column prop="Article_Name" align="center" label="企业名称"></el-table-column>
      <el-table-column prop="Category_Name" align="center" label="商品名称"></el-table-column>
      <el-table-column prop="Quantity" align="center" label="商品类型">
        <template v-slot="{row}">
          {{ZeroRemoval(row.Quantity)}}
        </template>
      </el-table-column>
      <el-table-column prop="Amount" align="center" label="销售金额">
        <template v-slot="{row}">
          {{thousands(row.Amount)}}
        </template>
      </el-table-column>
      <el-table-column prop="Amount" align="center" label="销售数量">
        <template v-slot="{row}">
          {{thousands(row.Amount)}}
        </template>
      </el-table-column>
      <el-table-column prop="Purchase_Amount" align="center" label="多级价格">
        <template v-slot="{row}">
          {{thousands(row.Purchase_Amount)}}
        </template>
      </el-table-column>
      <el-table-column prop="Paid_Amount" align="center" label="单价">
        <template v-slot="{row}">
          {{thousands(row.Paid_Amount)}}
        </template>
      </el-table-column>
      <!-- <el-table-column prop="Supplier_Name" align="center" label="供应商名称"></el-table-column> -->
      <!-- <el-table-column prop="Purchase_Amount" align="center" label="应付金额"></el-table-column>
            <el-table-column prop="Paid_Amount" align="center" label="实付金额"></el-table-column>
            <el-table-column prop="Sales_Amount" align="center" label="应收金额"></el-table-column>
            <el-table-column prop="Collection_Amount" align="center" label="实收金额"></el-table-column>
            <el-table-column prop="Quantity" align="center" label="数量"></el-table-column> -->
      <!-- <el-table-column label="操作" width="200">
              <template v-slot="{row}">
                <el-button type="primary" size="small" @click="DistributeSupplier()">分配供应商</el-button>
                <el-button type="primary" size="small" @click="GeneratePurchase()">生成采购单</el-button>
              </template>
            </el-table-column> -->
    </el-table>
    <el-pagination background v-show="total > 0" @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="form.page" :page-sizes="[1,2,3,10,50,100,500,1000]" :page-size="form.limit"
      layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>


  </div>
  <script type="text/javascript" src="../../../js/jquery-3.6.0.min.js"></script>
  <script type="text/javascript" src="../../../js/jquery.cookie.js"></script>
  <script type="text/javascript" src="../../../js/vue.min.js"></script>
  <script type="text/javascript" src="../../../elementUI/index.js"></script>
  <script type="text/javascript" src="../../../js/utils.js"></script>
  <script type="text/javascript" src="../../../js/echarts.min.js"></script>
  <script type="text/javascript" src="./js/ListingProducts.js"></script>
</body>

</html>